<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<link rel="stylesheet" href="ui.css">
<link rel="stylesheet" href="notebook.css">
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="notebook.js"></script>
<script type="text/javascript" src="image.js"></script>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript" src="transform.js"></script>
<script type="text/javascript" src="compose.js"></script>
<script type="text/javascript" src="apply.js"></script>
<script type="text/javascript" src="editor.js"></script>
<title>Lightwave</title>
<style type="text/css">
</style>
</head>

<body id="body">
<div id="wait_screen"> </div>
<div id="pagecontent_fullscreen">
  <div id="pagecontent_fullscreen_scaled">
  </div>
</div>
<!-- <button onclick="toggleQueue()">Test composing</button> -->
<div id="screen">
  <div id="tabs">
    <div class="tab newtab inactivetab" style="left:-3px" onclick="newChapter()">+</div>
    <a href="/logout" style="text-decoration:none; float:right">Logout</a>
  </div>
  <div id="tabsborder">&nbsp;</div>
  <div id="pagecontainer" style="display:none">
    <div id="vtabs">
      <div class="newvtab" id="newvtab" onclick="newPage()">New page &#x25be;</div>
   </div>
    <div id="pagecontrols"><div style="position:relative; top:10px" class="ui-toolbar"><button id="back-to-inbox" onclick="showInbox()">&#x21a9;</button></div> <div style="position:relative; top:10px" class="ui-toolbar"><button onclick="pageArchive()">Archive</button><button>Delete</button></div> <div style="position:relative; top:10px" class="ui-toolbar"><button onclick="showPageLabels(event)">Label &#x25be;</button><button id="page-further-actions-button" onclick="showPageFurtherAtions()">Further actions &#x25be;</button></div> <div style="position:relative; top:10px" class="ui-toolbar"><button onclick="pageMarkAsRead()">Mark as read</button></div>
      <div style="float:right; position:relative; top:10px; margin-left:20px;"><input id="pagesearchbox" class="ui-searchbox ui-searchbox-inactive" value="Search" type="text" onfocus="pageSearchboxFocus()" onkeypress="onPageSearchboxKeyPress(event)"></div>
      <div id="paraglayouts">
        <button onclick="setParagLayout('head1')" class="paraglayout"><div class="paraglayout-sample parag-button-head1"><div class="center-table"><div class="center-cell">AaBbCcDdEeFfGgHh</div></div></div><div class="paraglayout-name">Heading 1</div></button>
        <button onclick="setParagLayout('head2')" class="paraglayout"><div class="paraglayout-sample parag-button-head2"><div class="center-table"><div class="center-cell">AaBbCcDdEeFfGgHh</div></div></div><div class="paraglayout-name">Heading 2</div></button>
        <button onclick="setParagLayout('standard')" class="paraglayout"><div class="paraglayout-sample parag-button-standard"><div class="center-table"><div class="center-cell">AaBbCcDdEeFfGgHh</div></div></div><div class="paraglayout-name">Standard</div></button>
        <button onclick="setParagLayout('emph')" class="paraglayout"><div class="paraglayout-sample parag-button-emph"><div class="center-table"><div class="center-cell">AaBbCcDdEeFfGgHh</div></div></div><div class="paraglayout-name">Emphasize</div></button>
      </div>
    </div>    
    <div id="page">
      <div id="share">
        <div class="sharebutton" onclick="showShare(event)">Share this page &#x25be;</div>
        <div class="invitations" id="invitations">Invitations sent</div>
      </div>
      <div id="pagecontent"></div>
    </div>
    <div id="searchpage" style="display:none">Search goes here ...
    </div>
  </div>
  <div id="inbox">
    <div class="inboxcontrols"><div class="ui-toolbar"><button><input id="inboxui-select-all" onclick="inboxSelectAll(event)" type="checkbox">&#x25be;</button></div> <div class="ui-toolbar"><button onclick="inboxArchive()">Archive</button><button>Delete</button></div> <div class="ui-toolbar"><button onclick="showInboxLabels(event)">Label &#x25be;</button><button>Further actions &#x25be;</button></div> <div class="ui-toolbar"><button onclick="inboxMarkAsRead()">Mark as read</button></div>
      <div style="float:right; position:relative; margin-right:20px;"><input id="inboxsearchbox" class="ui-searchbox ui-searchbox-inactive" value="Search" type="text" onfocus="inboxSearchboxFocus()"></div>
    </div>
    </div>
  </div>
</div>

<div class="ui-dialog" id="share-dialog" style="z-index:200; position:absolute; visibility:hidden; padding-bottom:10px; left:0px; top:0px;">
  <div class="ui-titlebar"><div onclick="closeShare()" class="ui-titlebar-close-button">&#x2573;</div>Share page with others</div>
  <div class="ui-section-blue" style="padding-top:16px; padding-bottom:16px; padding-left:8px; padding-right:8px;">
   <button style="float:left; margin-right:6px;" onclick="share()">Share</button><input style="font-size:16px; outline:none; display:block;" type="text" class="ui-searchbox" id="share-dialog-input">
  </div>
  <div class="ui-section" style="overflow-y:auto; overflow-x:hidden; height:400px">
  </div>
</div>

<div id="further-actions-dialog" class="ui-drop-down">
  <div class="ui-menu">
    <div class="ui-menu-item"><a href="#" onclick="startPresentation(event)">Start Presentation</a></div>
  </div>
</div>

<div id="labels-dialog" class="ui-drop-down">
  <div id="labels-dialog-listbox" class="ui-list-box">
 </div>
</div>

<div class="ui-dialog" id="invite-dialog" style="z-index:200; position:absolute; visibility:hidden; padding-bottom:10px; left:25%; top:100px; width:500px; font-size:11pt">
  <div class="ui-titlebar"><div onclick="closeInvite()" class="ui-titlebar-close-button">&#x2573;</div>Send an invitation</div>
  <div class="ui-section-blue" style="padding-top:16px; padding-bottom:16px; padding-left:8px; padding-right:8px;">
   The user is currently not registered at lightwave.<br><br>Lightwave can send an invitation message for you. Edit the invitation message below and then send it.<br><br>
    <textarea id="ui-invite-text" style="width:100%; min-height:300px; font-size:11pt; font-family:courier">
Hi,

someone wants to share a notebook page with you on lightwave.
    
Click here to view it
http://light-wave.appspot.com

If you want to edit or comment the page, you must register at lightwave.
Registration and use is FREE.
    </textarea><br>
    <button style="font-size:11pt" id="ui-send-invite"">Send invitation</button>
  </div>
</div>

<script type="text/javascript">
var book = new Book("123456", "MyBook");

function newChapter() {
  var c = new Chapter(book, "tmp-" + Math.random().toString(), "Untitled " + (book.chapters.length).toString(), book.chapters.length % 4, book.chapters[book.chapters.length - 1].id);
  var p = new Page(c, "tmp-" + Math.random().toString(), "Untitled Page", null)
  p.pageBlobRef = "tmp-page" + Math.random().toString();
  c.addPage(p);
  var co1 = new PageContent(p, "tmp-title" + Math.random().toString(), "\nPage title", "title", {});
  p.addContent(co1);
  var co2 = new PageContent(p, "tmp-content" + Math.random().toString(), "\nSome text", "textbox", {});
  p.addContent(co2);
  p.addFollower(new Follower(p, store.userID));
  book.addChapter(c, true);
  store.createChapterEntity(c);
  store.createPage(p);
  store.createContentEntity(co1);
  store.createContentEntity(co2);
}

function newPage() {
  var p;
  if (book.currentChapter.pages.length == 0) {
    p = new Page(book.currentChapter, "tmp-" + Math.random().toString(), "Untitled page " + (book.currentChapter.pages.length + 1).toString(), null);
  } else {
    p = new Page(book.currentChapter, "tmp-" + Math.random().toString(), "Untitled page " + (book.currentChapter.pages.length + 1).toString(), book.currentChapter.pages[book.currentChapter.pages.length - 1].id);
  }
  p.pageBlobRef = "tmp-page" + Math.random().toString();
  book.currentChapter.addPage(p, true);
  var co1 = new PageContent(p, "tmp-title" + Math.random().toString(), "\nPage title", "title", {});
  p.addContent(co1);
  var co2 = new PageContent(p, "tmp-content" + Math.random().toString(), "\nSome text " + Math.random().toString(), "textbox", {});
  p.addContent(co2);
  p.addFollower(new Follower(p, store.userID));
  store.createPage(p);
  store.createContentEntity(co1);
  store.createContentEntity(co2);
}

function copyPageToChapter(existingPage, chapter) {
  var p = new Page(chapter, "tmp-" + Math.random().toString(), existingPage.text, chapter.pages.length > 0 ? chapter.pages[chapter.pages.length - 1].id : null);
  p.pageBlobRef = existingPage.pageBlobRef;
  chapter.addPage(p, true);
  store.createPageEntity(p);
}

</script>

<script type="text/javascript">
var token = "{{token}}";
var sessionID = "{{session}}";
var userID = "{{userid}}";
store.init(userID, sessionID, token);
store.loadBook();
store.loadInbox();

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
	do {
	    curleft += obj.offsetLeft;
	    curtop += obj.offsetTop;
	} while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}

function showShare(e) {
  var targ;
  if (!e) var e = window.event;
  if (e.target) targ = e.target;
  else if (e.srcElement) targ = e.srcElement;
  if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;

  var dlg = document.getElementById("share-dialog");
  var pos = findPos(targ);
  dlg.style.visibility = "visible";
  dlg.style.left = (pos[0] - 8 - dlg.offsetWidth).toString() + "px";
  dlg.style.top = (pos[1] + 2 + targ.offsetHeight).toString() + "px";
}

function closeShare() {
  var dlg = document.getElementById("share-dialog");
  dlg.style.visibility = "hidden";
}

function share() {
  var input = document.getElementById("share-dialog-input");
  if (input.value == "") {
    return;
  }
  if (!book || !book.currentChapter || !book.currentChapter.currentPage) {
    return;
  }
  var username = input.value;
 // Send invitation email
  var inviteByMail = function() {
    closeInvite();
    store.inviteByMail(follower, document.getElementById("ui-invite-text").value)
 };
  var f = function(knownuser) {
    closeShare();
    if (!knownuser) {
      openInvite(username);
      document.getElementById("ui-send-invite").onclick = inviteByMail;
      return;
    }
  };
  // Add as a follower
  var follower = new Follower(book.currentChapter.currentPage, username, null);
  book.currentChapter.currentPage.addInvitation(follower);
  store.invite(follower, f);
}

function openInvite(username) {
  var dlg = document.getElementById("invite-dialog");
  dlg.style.visibility = "visible";
}

function closeInvite() {
  var dlg = document.getElementById("invite-dialog");
  dlg.style.visibility = "hidden";
}

function showInbox() {
  book.inbox.setActivePage(null);
}

function inboxMarkAsRead() {
  var pages = book.inbox.getSelectedPages();
  for( var i = 0; i < pages.length; i++) {
    var page = pages[i];
    var pi = store.get(page.pageBlobRef);
    store.markAsRead(page.pageBlobRef, Math.max(page.inbox_latestseq, pi.sequenceNumber() - 1));
  }
}

function inboxArchive() {
  var pages = book.inbox.getSelectedPages();
  for( var i = 0; i < pages.length; i++) {
    var page = pages[i];
    store.markAsArchived(page);
  }
}

function inboxSelectAll(e) {
  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
  var input = document.getElementById("inboxui-select-all");
  var pages = book.inbox.pages;
  if (input.checked) {
    for( var i = 0; i < pages.length; i++) {
      var page = pages[i];
      page.inbox_selected = true;
      var div = document.getElementById("inboxitem-" + page.pageBlobRef);
      $(div).addClass("inboxitemselected");
      div.firstChild.checked = true;
    }
  } else {
    for( var i = 0; i < pages.length; i++) {
      var page = pages[i];
      page.inbox_selected = false;
      var div = document.getElementById("inboxitem-" + page.pageBlobRef);
      $(div).removeClass("inboxitemselected");
      div.firstChild.checked = false;
    }
 }
};

function pageArchive() {
  if (book.currentChapter && book.currentChapter.currentPage && book.currentChapter.currentPage.pageBlobRef) {
    store.markAsArchived(book.currentChapter.currentPage);
  }
}

function pageMarkAsRead() {
  if (book.currentChapter && book.currentChapter.currentPage && book.currentChapter.currentPage.pageBlobRef) {
    var pi = store.get(book.currentChapter.currentPage.pageBlobRef);
    store.markAsRead(book.currentChapter.currentPage.pageBlobRef, pi.sequenceNumber() - 1);
  }
}

function showPageFurtherAtions(e) {
  var targ;
  if (!e) var e = window.event;
  if (e.target) targ = e.target;
  else if (e.srcElement) targ = e.srcElement;
  if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;
  var dlg = document.getElementById("further-actions-dialog");
  if ($(targ).hasClass("dropdown-open")) {
    $(targ).removeClass("dropdown-open");
    dlg.style.visibility = "hidden";
    return;
  }
  $(targ).addClass("dropdown-open");

  var pos = findPos(targ);
  dlg.style.visibility = "visible";
  dlg.style.left = (pos[0] + 2).toString() + "px";
  dlg.style.top = (pos[1] + 2 + targ.offsetHeight).toString() + "px";
}

function inboxCopyToChapter_(chapter) {
  // Get all selected pages
  var selpages = book.inbox.getSelectedPages();
  for( var i = 0; i < selpages.length; i++) {
    if (!chapter.getPageByPageBlobRef(selpages[i].pageBlobRef)) {
      copyPageToChapter(selpages[i], chapter);
    }
  }
  book.inbox.redrawInbox();
}

function inboxDeleteFromChapter_(chapter) {
  // Get all selected pages
  var selpages = book.inbox.getSelectedPages();
  for( var i = 0; i < selpages.length; i++) {
    var p = chapter.getPageByPageBlobRef(selpages[i].pageBlobRef);
    if (p) {
      store.deletePageEntity(p);
    }
  }
  book.inbox.redrawInbox();
}

function showInboxLabels_toggle(e, chapter) {
  // Update the UI
  var span;
  if (!e) var e = window.event;
  if (e.target) span = e.target;
  else if (e.srcElement) span = e.srcElement;
  span = span.firstChild;
  if (span.nodeType == 3) // defeat Safari bug
    span = span.parentNode;
  if ($(span).hasClass("tristate-1")) {
    span.innerHTML = "&#x25ce; ";
    span.className = "tristate-2";
    inboxDeleteFromChapter_(chapter);
  } else if ($(span).hasClass("tristate-2")) {
    span.innerHTML = "&#x25c9; ";
    span.className = "tristate-1";
    inboxCopyToChapter_(chapter);
  } else {
    span.innerHTML = "&#x25c9; ";
    span.className = "tristate-1";
    inboxCopyToChapter_(chapter);
  }
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}

function showInboxLabels(e) {
  var targ;
  if (!e) var e = window.event;
  if (e.target) targ = e.target;
  else if (e.srcElement) targ = e.srcElement;
  if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;
  var dlg = document.getElementById("labels-dialog");
  if ($(targ).hasClass("dropdown-open")) {
    $(targ).removeClass("dropdown-open");
    dlg.style.visibility = "hidden";
    return;
  }
  $(targ).addClass("dropdown-open");
  var listbox = document.getElementById("labels-dialog-listbox");
  listbox.innerHTML = "";
  // Get all selected pages
  var selpages = book.inbox.getSelectedPages();
  var pages = book.getPages();
  var chapters = { };
  for( var i = 0; i < selpages.length; i++) {
    var lst = pages[selpages[i].pageBlobRef];
    for( var k = 0; k < lst.length; k++) {
      var c = lst[k];
      chapters[c.id] = (chapters[c.id] > 0 ? chapters[c.id] : 0) + 1;
    }
  }
  // Start at 1 to skip the inbox
  for ( var i = 1; i < book.chapters.length; i++) {
    var chapter = book.chapters[i];
    var div = document.createElement("div");
    div.style.backgroundColor = colorSchemes[chapter.colorScheme].color;
    var input = document.createElement("span");
    if (chapters[chapter.id] == selpages.length) {
      input.className = "tristate-1";
      input.innerHTML = "&#x25c9; ";
    } else if (!chapters[chapter.id]) {
      input.className = "tristate-2";
      input.innerHTML = "&#x25ce; ";
    } else {
      input.className = "tristate-3";
      input.innerHTML = "&#x25ac; ";
    }
    div.addEventListener("click", function(ch) {
      return function(e) {
        showInboxLabels_toggle(e, ch);
      };
    }(chapter));
    div.appendChild(input);
    div.appendChild(document.createTextNode(chapter.text));
    listbox.appendChild(div);
  }
  var pos = findPos(targ);
  dlg.style.visibility = "visible";
  dlg.style.left = (pos[0] + 2).toString() + "px";
  dlg.style.top = (pos[1] + 2 + targ.offsetHeight).toString() + "px";
}

function showPageLabels(e) {
  var targ;
  if (!e) var e = window.event;
  if (e.target) targ = e.target;
  else if (e.srcElement) targ = e.srcElement;
  if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;
  var dlg = document.getElementById("labels-dialog");
  if ($(targ).hasClass("dropdown-open")) {
    $(targ).removeClass("dropdown-open");
    dlg.style.visibility = "hidden";
    return;
  }
  if (!book || !book.currentChapter || !book.currentChapter.currentPage) {
    return;
  }
  var page = book.currentChapter.currentPage;
  // Find out in which chapter this page is
  var pages = book.getPages();
  var chapters = { };
  for( var i = 0; i < pages[page.pageBlobRef].length; i++) {
    chapters[pages[page.pageBlobRef][i].id] = true;
  }
  $(targ).addClass("dropdown-open");
  var listbox = document.getElementById("labels-dialog-listbox");
  listbox.innerHTML = "";
  for ( var i = 1; i < book.chapters.length; i++) {
    var chapter = book.chapters[i];
    var div = document.createElement("div");
    div.style.backgroundColor = colorSchemes[chapter.colorScheme].color;
    var input = document.createElement("input");
    input.type = "checkbox";
    if (chapters[chapter.id]) {
      input.checked = true;
    }
    input.addEventListener("click", function(checkbox, ch) { return function() {
      if (checkbox.checked) {
        copyPageToChapter(page, ch);
      } else {
        var p = ch.getPageByPageBlobRef(page.pageBlobRef);
        if (p) {
          store.deletePageEntity(p);
        }
      }
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
    };}(input, chapter));
    div.addEventListener("click", function(checkbox, ch) { return function(e) {
      if (!checkbox.checked) {
        checkbox.checked = true;
        copyPageToChapter(page, ch);
      } else {
        checkbox.checked = false;
        var p = ch.getPageByPageBlobRef(page.pageBlobRef);
        if (p) {
          store.deletePageEntity(p);
        }
      }
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
    };}(input, chapter));
    div.appendChild(input);
    div.appendChild(document.createTextNode(chapter.text));
    listbox.appendChild(div);
  }
  var pos = findPos(targ);
  dlg.style.visibility = "visible";
  dlg.style.left = (pos[0] + 2).toString() + "px";
  dlg.style.top = (pos[1] + 2 + targ.offsetHeight).toString() + "px";
}

function setParagLayout(layout) {
  var e = LW.Editor.currentEditor;
  if (!e) {
    return;
  }
  e.setParagLayout(layout);
}

function pageSearchboxFocus() {
  var box = document.getElementById("pagesearchbox");
  if ($(box).hasClass("ui-searchbox-inactive")) {
    $(box).removeClass("ui-searchbox-inactive");
    box.value = "";
  }
}

function inboxSearchboxFocus() {
  var box = document.getElementById("inboxsearchbox");
  if ($(box).hasClass("ui-searchbox-inactive")) {
    $(box).removeClass("ui-searchbox-inactive");
    box.value = "";
  }
}

function showPageSearch() {
  var pagediv = document.getElementById("page");
  pagediv.style.display = "none";
  var ldiv = document.getElementById("paraglayouts");
  ldiv.style.display = "none";
  var searchdiv = document.getElementById("searchpage");
  searchdiv.style.display = "block";
}

function hidePageSearch() {
  var pagediv = document.getElementById("page");
  pagediv.style.display = "block";
  var ldiv = document.getElementById("paraglayouts");
  ldiv.style.display = "block";
  var searchdiv = document.getElementById("searchpage");
  searchdiv.style.display = "none";
}

function onPageSearchboxKeyPress(e) {
  if ( e.keyIdentifier == "Enter" || e.keyCode == 13) {
    showPageSearch();
  }
}

function showWaitScreen() {
  document.getElementById("wait_screen").style.display = "block";
}

function hideWaitScreen() {
  document.getElementById("wait_screen").style.display = "none";
}

var fullscreen = false;

function startPresentation(e) {
  if ( !book || !book.currentChapter || !book.currentChapter.currentPage ) {
    return;
  }
  var dlg = document.getElementById("further-actions-dialog");
  var button = document.getElementById("page-further-actions-button");
  $(button).removeClass("dropdown-open");
  dlg.style.visibility = "hidden";

  var div = document.getElementById("pagecontent_fullscreen");
  div.style.display = "block";
 var div = document.getElementById("screen");
  div.style.display = "none";
  var body = document.getElementById("body");
  $(body).addClass("fullscreen");
  book.currentChapter.currentPage.enterFullScreen();

  if (!e) var e = window.event;
  if (e.preventDefault) e.preventDefault();
  return false;
}

function keydown(e) {
  if (fullscreen) {
   if (e.keyCode == 38) { // Up
      var i = book.currentChapter.currentPageIndex();
      if (i <= 0) {
        return;
      }
      book.currentChapter.setActivePage( book.currentChapter.pages[i-1] );
    } else if (e.keyCode == 40) { // Down
      var i = book.currentChapter.currentPageIndex();
      if (i >= book.currentChapter.pages.length - 1) {
        return;
      }
      book.currentChapter.setActivePage( book.currentChapter.pages[i+1] );
    } else if (e.keyCode == 27) { // ESC
      var body = document.getElementById("body");
      $(body).removeClass("fullscreen");
      book.currentChapter.currentPage.leaveFullScreen();
      var div = document.getElementById("pagecontent_fullscreen");
      div.style.display = "none";
     var div = document.getElementById("screen");
      div.style.display = "block";
   }
  }
}

function resize(e) {
  if (fullscreen) {
    book.currentChapter.currentPage.applyLayout_();
  }
}

document.addEventListener("keydown", keydown);
document.addEventListener("resize", resize);

LW.registerDnD();

function toggleQueue() {
  if (store.paused) {
    store.resumeQueues();
  } else {
    store.pauseQueues();
  }
}
</script>

</body> </html>
